<template>
  <div
    :style="{ width: `${wWidth}px`, height: `${wHeight}px` }" 
    class="wrap">
    <van-loading 
      v-show="!isLoaded"
      color="#F8E71C"
      size="50px" />
    <div 
      v-show="isLoaded" 
      style="width: 100%;height: 100%">
      <div
        v-show="showTitle"
        :class="currentIndex === 1 ? 'active' : ''"
        class="nav-wrap">
        <img
          v-if="currentIndex !== 1"
          src="~/static/img/web_logo_yellow.png" 
          class="nav-left">
        <img
          v-if="currentIndex === 1"
          src="~/static/img/web_logo_black.png" 
          class="nav-left-logo">
        <div class="nav-right">
          <div
            v-for="(name, index) in navList"
            :key="name.name"
            :class="currentIndex === index ? 'active' : ''"
            class="nav-text"
            @click="tapNav(index)"
          >{{ name.name }}</div>
          <div
            :class="`active-${currentIndex}`"
            class="right-bottom" />
        </div>
      </div>
      <div 
        v-swiper:mySwiper="swiperOption"
        ref="swiperContent"
        class="swiper-body"
        @slideChange="swiperChange"
      >
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <home @nextPage="nextPage" />
          </div>
          <div class="swiper-slide">
            <vip-first v-if="swiperIndex === 1" />
          </div>
          <div class="swiper-slide">
            <vip-second v-if="swiperIndex === 2" />
          </div>
          <div class="swiper-slide">
            <vip-third v-if="swiperIndex === 3" />
          </div>
          <div class="swiper-slide">
            <about v-if="swiperIndex === 4" />
          </div>
        </div>
        <div
          v-show="showTitle"
          :class="currentIndex === 1 ? 'swiper-active-color' : ''"
          class="swiper-pagination swiper-pagination-bullets" />
      </div>
    </div>
  </div>
</template>

<script>
import home from '@/components/home'
import vipFirst from '@/components/vip-first'
import vipSecond from '@/components/vip-second'
import vipThird from '@/components/vip-third'
import about from '@/components/about'
import { Tab, Tabs } from 'vant'

export default {
  components: {
    home,
    vipFirst,
    vipSecond,
    vipThird,
    about
  },
  data() {
    return {
      wWidth: '',
      wHeight: '',
      html: '',
      currentIndex: 0,
      swiperIndex: 0,
      isLoaded: false,
      showMinxi: false,
      phone: false,
      PC: false,
      navList: [{ name: '首页' }, { name: '会员权益' }, { name: '关于我们' }],
      swiperOption: {
        mousewheelForceToAxis: true,
        slidesPerView: 'auto',
        preventInteractionOnTransition: true,
        keyboard: {
          enabled: true,
          onlyInViewport: false
        },
        mousewheel: {
          forceToAxis: true,
          invert: true
        },
        centeredSlides: true,
        direction: 'vertical',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      showTitle: false
    }
  },
  head() {
    return {
      title: '多拿点 - 自买自省、分享赚钱'
    }
  },
  mounted() {
    this.init()
    if (
      /Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(
        navigator.userAgent
      )
    ) {
      this.phone = true
      console.log('现在是手机端')
    } else if (/iPad/i.test(navigator.userAgent)) {
      console.log('现在是平板端')
    } else {
      this.PC = true
      console.log('现在是PC端')
    }
  },
  methods: {
    init() {
      this.wWidth = window.innerWidth
      this.wHeight = window.innerHeight
      this.html = document.getElementsByTagName('html')[0]
      this.html.style.fontSize = `${(16 / 1920) * this.wWidth}px`
      this.isLoaded = true
      window.onresize = () => {
        this.wWidth = window.innerWidth
        this.wHeight = window.innerHeight
        this.html.style.fontSize = `${(16 / 1920) * this.wWidth}px`
      }
      this.time = setTimeout(() => {
        this.showTitle = true
      }, 2500)
    },
    tapNav(index) {
      let i = index
      if (index === 2) {
        i = 4
      }
      this.mySwiper.slideTo(i)
    },
    swiperChange() {
      this.swiperIndex = this.mySwiper.activeIndex
      if (this.mySwiper.activeIndex === 0) {
        this.currentIndex = 0
      } else if (this.mySwiper.activeIndex === 4) {
        this.clearTimer()
        this.currentIndex = 2
      } else {
        this.clearTimer()
        this.currentIndex = 1
      }
    },
    clearTimer() {
      if (this.time) {
        clearTimeout(this.time)
        this.showTitle = true
        this.time = null
      }
    },
    nextPage() {
      this.mySwiper.slideTo(1)
    }
  }
}
</script>

<style lang="scss">
.swiper-pagination-bullet {
  width: 1rem !important;
  height: 1rem !important;
  background-color: #ffffff !important;
  margin: 1rem !important;
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 7rem !important;
}
.swiper-active-color {
  .swiper-pagination-bullet-active {
    background-color: #888888 !important;
  }
  .swiper-pagination-bullet {
    border: 0.08rem #888888 solid !important;
    background-color: #888888 !important;
  }
}
.swiper-pagination-bullet-active {
  background-color: #ffffff !important;
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1024px) {
  .nav-wrap {
    padding: 1rem 2rem !important;
  }
}
.swiper-slide,
.swiper-body,
.swiper-wrapper {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.wrap {
  overflow: hidden;
  font-size: 0;
  .van-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    box-sizing: border-box;
    padding: 1rem 8rem 1rem 12rem;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
    color: rgb(255, 255, 255);
    transition: background-color 1s;
    &.active {
      background-color: #f8e71c;
      transition: background-color 2s;
      .nav-right {
        color: black !important;
        .right-bottom {
          background-color: black;
        }
        .active {
          color: black !important;
        }
      }
    }
    .nav-left {
      width: 4rem;
    }
    .nav-left-logo {
      margin-left: 0.5rem;
      width: 4rem;
    }
    .nav-right {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 1.5rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      .nav-text:first-child {
        width: 5.7rem;
      }
      .nav-text {
        height: 2rem;
        text-align: justify;
        margin: 0 2rem 0 0;
        cursor: pointer;
        &::after {
          content: '';
          display: inline-block;
          width: 100%;
        }
        &.active {
          color: white;
        }
      }
      .right-bottom {
        position: absolute;
        bottom: -7px;
        left: 0.5rem;
        width: 4.7rem;
        height: 0.17rem;
        background-color: white;
        &.active-0 {
          transform: translateX(0rem);
          transition: transform 0.4s;
        }
        &.active-1 {
          transform: translateX(7.8rem);
          transition: transform 0.4s;
        }
        &.active-2 {
          transform: translateX(15.8rem);
          transition: transform 0.4s;
        }
      }
    }
  }
}
</style>
